<template>
<div class="mine-wrap">
    <G_header title="我的秒抢" />
    <div class="mine-wrap-item">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">
            <van-panel v-for="item in list" :key="item" :title="'第'+item.sec_kill.start_at+'期'" :desc="secStatus(item.sec_kill.status)" :status="secUserStatus(item.status)">
                <van-card :num="item.sec_kill.number" :tag="item.sec_kill.mode == 'Year'? '全年秒杀' : '爆品秒杀'" :price="item.sec_kill.good.price" :desc="item.sec_kill.good.title" :title="item.sec_kill.good.sort_title" :thumb="item.sec_kill.good.avatar" :origin-price="item.sec_kill.good.original_price">
                    <div slot="footer" v-if="item.sec_kill.status == 'Finish'">
                        <van-button size="small" type="primary" plain @click="showPopup(item.sec_kill)">秒抢记录</van-button>
                    </div>
                </van-card>
            </van-panel>
        </van-list>
    </div>
    <van-popup v-model="show" overlay :style="{ width: '90%',height:'100%',padding:'10px'}" position="right" closeable="true" >
        <div v-if="seckill">第{{seckill.start_at}}期</div>
        <van-card v-if="seckill" :num="seckill.number" :tag="seckill.mode == 'Year'? '全年秒杀' : '爆品秒杀'" :price="seckill.good.price" :desc="seckill.good.title" :title="seckill.good.title" :thumb="seckill.good.avatar" :origin-price="seckill.good.original_price">
                   </van-card>
        <van-cell-group title="秒抢信息">
          
          <van-row type="flex" justify="space-around" v-for="item in log" :key="item" class="list-row">
            <van-col span="4"><van-image round width="3rem" height="3rem" style="border: 2px solid white;vertical-align:middle" :src="item.avatar || avatar " /></van-col>
            <van-col span="6">{{item.user.nickname}}</van-col>
            <van-col span="10">{{item.user.mobile}}</van-col>
            <van-col span="4">
              <van-tag type="success" v-if="item.status == 'Success'">{{secUserStatus(item.status)}}</van-tag>
              <van-tag type="danger" v-else-if="item.status == 'Fail'">{{secUserStatus(item.status)}}</van-tag>
              <van-tag v-else>{{secUserStatus(item.status)}}</van-tag>
              </van-col>
          </van-row>
        </van-cell-group>
    </van-popup>
</div>
</template>

<script>
</script><script>
export default {
    name: 'Mine',
    data() {
        return {
            list: [],
            data: [],
            log:[],
            avatar: "https://img.yzcdn.cn/vant/cat.jpeg",
            loading: false,
            finished: false,
            show:false
        }
    },
    components: {},
    methods: {
        getData(params = {}) {
            let _this = this;
            let currentPage = 1;
            if (this.data.current_page) {
                currentPage = this.data.current_page;
            }
            if (currentPage >= this.data.last_page) {
                return;
            }
            params.token = sessionStorage.getItem("token");
            this.axios.get('/api/store/seckill/my_log', {
                params
            }).then(res => {
                this.data = res.data.data;
                
                res.data.data.data.forEach((item) => {
                    this.list.push(item);
                })
                _this.loading = false;
                if (res.data.data.current_page >= res.data.data.last_page) {
                    _this.finished = true;
                }
            }).catch(err => {
                console.log(err);

            })
        },
        secStatus(status) {
            switch (status) {
                case 'Finish':
                    return '秒杀已结束';
                    break;
                case 'Apply':
                    return '秒杀预约中';
                    break;
                case 'Normal':
                    return '秒杀进行中';
                case 'Wait':
                    return '秒杀尚未开始';
            }
        },
        secUserStatus(status) {
            switch (status) {
                case 'Success':
                    return '秒杀成功';
                    break;
                case 'Fail':
                    return '秒抢失败';
                    break;
                case 'Wait':
                    return '尚未开奖';
                default:
                    return '未知状态';
                    break;
            }
        },
        showPopup(item) {
          this.seckill = item;
          this.show = true;
          this.getSuccessDate(item.id);
        },
        getSuccessDate(id){
          this.axios.get('/api/store/seckill/sec_success/' + id).then(res => {
                this.log = res.data.data;
            }).catch(err => {
                console.log(err);

            })
        }

    }
}
</script>

<style scoped>
.mine-wrap-item {
    box-sizing: border-box;
    padding: 5px;
}
.list-row {
  line-height: 44px;
}
</style>
